<script setup>
import videoTem from './components/videoTem.vue';
import ourCourses from './components/ourCourses.vue';
import information from './components/information.vue';
import otherPage from './components/otherPage.vue';
import rollingSponsors from './components/rollingSponsors.vue';

import {
	GetWebSiteList,
	GetInformationList,
	GetCustomizationList,
	GetInviteList,
	GetCourseList,
	GetWebSiteHomeImage,
} from '~/apis/web';

const sections = ref([]); // 页面板块
const inviteList = ref([]); // 赞助链接
const bannerList = ref([]); // 首页轮播图

const normalizePath = path => (path || '').trim();
const resolveSectionType = path => {
	const lowerPath = path.toLowerCase();
	if (lowerPath.includes('/consultation')) return 'information';
	if (lowerPath.includes('/courses')) return 'courses';
	return 'custom';
};

const getInformationListData = async menuId => {
	const params = {
		pageNo: 1,
		pageSize: 30,
		menuId,
	};
	const res = await GetInformationList(params);
	if (res.code == 0) {
		return res.data.list || [];
	}
	return [];
};

const getCustomizationListData = async menuId => {
	const params = {
		pageNo: 1,
		pageSize: 30,
		menuId,
	};
	const res = await GetCustomizationList(params);
	if (res.code == 0) {
		return res.data.list || [];
	}
	return [];
};

const getCourseList = async () => {
	const params = {
		pageNo: 1,
		pageSize: 30,
	};
	const res = await GetCourseList(params);
	if (res.code == 0) {
		return res.data.list || [];
	}
	return [];
};

// 合作链接列表
const getInviteData = async () => {
	const params = {
		pageNo: 1,
		pageSize: 30,
	};
	const res = await GetInviteList(params);
	if (res.code == 0) {
		inviteList.value = res.data.list;
	}
};

// 首页轮播图
const getWebSiteHomeImageData = async () => {
	const res = await GetWebSiteHomeImage();
	if (res.code == 0) {
		bannerList.value = res.data.filter(item => item.status === 0);
	}
};

const buildSections = async () => {
	const res = await GetWebSiteList();
	if (res.code !== 0) return;
	// 先按 sort 从小到大排序，然后只处理一级菜单（level === 1）
	const sortedMenu = (res.data || [])
		.sort((a, b) => (a.sort || 0) - (b.sort || 0))
		.map(item => ({
			...item,
			path: normalizePath(item.path),
		}))
		.filter(item => item.level === 1 && item.path && item.path !== '/web');

	const loadedSections = [];
	for (const item of sortedMenu) {
		const type = resolveSectionType(item.path);
		let data = [];
		if (type === 'information') {
			data = await getInformationListData(item.id);
		} else if (type === 'courses') {
			data = await getCourseList();
		} else {
			data = await getCustomizationListData(item.id);
		}
		loadedSections.push({
			id: item.id,
			title: item.name,
			path: item.path,
			type,
			data,
		});
	}
	sections.value = loadedSections;
};

const init = () => {
	getWebSiteHomeImageData();
	getInviteData();
	buildSections();
};
init();
</script>

<template>
	<div class="home">
		<!-- 临时调试信息 -->
		<div class="home-content">
			<!-- 首屏视频 -->
			<videoTem :bannerList="bannerList" />

			<template v-for="section in sections" :key="section.id">
				<information v-if="section.type === 'information'" :title="section.title" :list-path="section.path"
					:informationList="section.data" />
				<our-courses v-else-if="section.type === 'courses'" :title="section.title" :list-path="section.path"
					:courseList="section.data" />
				<otherPage v-else :title="section.title" :list-path="section.path" :menu-id="section.id"
					:page-name="section.title" :customizationList="section.data" />
			</template>
			<!-- 滚动赞助商 -->
			<rollingSponsors :inviteList="inviteList" />
		</div>
	</div>
</template>

<style lang="less" scoped>
.home {
	width: 100%;

	.home-content {
		width: 100%;
	}
}
</style>
